<template>
  <div class="my-pager"
    :class="{
      'my-pager--small': size === 'small',
      'my-pager--large': size === 'large',
      [`my-pager--${type}`]: type
    }"
  >
    <a :class="{disabled: currentPage === 1}" @click="handleChick(1)" >首页</a>
    <a :class="{disabled: currentPage === 1}" @click="handleChick(currentPage - 1)" >
      <My-Icon icon="angles-left" />
    </a>
    <a v-if="total > pageCount && currentPage > pageCount" @click="handleChick(1)" >1</a>
    <a v-if="total > pageCount && currentPage > pageCount" @click="handleChick(pager[0] - 1)" >
      <My-Icon icon="ellipsis" size="sm" />
    </a>

    <a  :class="{active: i === currentPage}" v-for="i in pager" :key="i" @click="handleChick(i)" >{{ i }}</a>

    <a v-if="total > pageCount && currentPage < total - pageCount" @click="handleChick(pager[pager.length - 1] + 1)" >
      <My-Icon icon="ellipsis" size="sm" />
    </a>
    <a v-if="total > pageCount && currentPage < total - pageCount" @click="handleChick(total)" >{{ total }}</a>

    <a :class="{disabled: currentPage === total}" @click="handleChick(currentPage + 1)" >
      <My-Icon icon="angles-right" />
    </a>
    <a :class="{disabled: currentPage === total}" @click="handleChick(total)" >尾页</a>

  </div>
</template>

<script setup name="MyPager">
import propObj from './props'
import { computed } from 'vue';
defineOptions({
  name: 'MyPager'
})
const props = defineProps(propObj)
const emit = defineEmits(['current-change'])
const handleChick = (page) => {
  if(page < 1 || page > props.total) return
  emit('current-change', page)
}
const pager = computed(() => {
  const renderPage = []
  if (props.total <= props.pageCount) {
    for (let i = 1; i <= props.total; i++) {
      renderPage.push(i)
    }
  }
  else {
    if (props.currentPage <= props.pageCount) {
      for (let i = 1; i <= props.pageCount; i++){
        renderPage.push(i)
      }
    }
    else if (props.currentPage >= props.total - props.pageCount) {
      for (let i = props.total - props.pageCount; i <= props.total; i++) {
        renderPage.push(i)
      }
    }
    else {
      const preCount = Math.floor(props.pageCount / 2)
      const nextCout = props.pageCount - preCount
      for (let i = props.currentPage - preCount; i < props.currentPage + nextCout; i++) {
        renderPage.push(i)
      }

    }
  }
  return renderPage
})
</script>

<style lang="scss" scoped>

</style>
